<template>
	<div>
		<ma-body>
			<div slot="header" v-if="couponType == 'my'">
				<div class="header-box">
					<div>
						<span v-for="item,index in titleList" class="title"
							:class="{'selectTitle': index == currindex }" @tap="onSelect(index)">{{item}}</span>
					</div>
				</div>
			</div>
			<div slot="content" class="content">
				<swiper :current="currindex" @change="swiperChange" v-if="couponType == 'my'">
					<swiper-item>
						<ma-refresh pageNum="page0">
							<div class="big-box" v-if="page0.list.length > 0">
								<div class="coupon-box" v-for="item in page0.list">
									<div class="left"></div>
									<div class="right"></div>
									<div class="coupon-info">
										<span class="coupon-border" v-if="item.info.tags">{{ item.info.tags }}专用券</span>
										<span class="coupon-money">
											<label style="font-size: 3.73vw;">￥</label>{{item.info.price | moneyFilter}}
										</span>
										<span class="jiu-font24-555" style="color: #A972FF;">满{{item.info.conditionPrice | moneyFilter}}元可用</span>
										<span class="jiu-font24-555">有效期: {{ item.info.startTime.slice(0,10) }}～{{ item.info.endTime.slice(0,10) }}</span>
									</div>
									<span class="coupon-btn" :class="[item.userCoupon.useStatus != 'unused' ? 'over' : '']">{{  useText(item.userCoupon.useStatus) }}</span>
								</div>
							</div>
							<div class="img-box" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh pageNum="page1">
							<div class="big-box" v-if="page1.list.length > 0">
								<div class="coupon-box" v-for="item in page1.list">
									<div class="left"></div>
									<div class="right"></div>
									<div class="coupon-info">
										<span class="coupon-border" v-if="item.info.tags">{{ item.info.tags }}专用券</span>
										<span class="coupon-money">
											<label style="font-size: 3.73vw;">￥</label>{{item.info.price | moneyFilter}}
										</span>
										<span class="jiu-font24-555" style="color: #A972FF;">满{{item.info.conditionPrice | moneyFilter}}元可用</span>
										<span class="jiu-font24-555">有效期: {{ item.info.startTime.slice(0,10) }}～{{ item.info.endTime.slice(0,10) }}</span>
									</div>
									<span class="coupon-btn" >去使用</span>
								</div>
							</div>
							<div class="img-box" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh pageNum="page2">
							<div class="big-box" v-if="page2.list.length > 0">
								<div class="coupon-box" v-for="item in page2.list">
									<div class="left"></div>
									<div class="right"></div>
									<div class="coupon-info">
										<span class="coupon-border" v-if="item.info.tags">{{ item.info.tags }}专用券</span>
										<span class="coupon-money">
											<label style="font-size: 3.73vw;">￥</label>{{item.info.price | moneyFilter}}
										</span>
										<span class="jiu-font24-555" style="color: #A972FF;">满{{item.info.conditionPrice | moneyFilter}}元可用</span>
										<span class="jiu-font24-555">有效期: {{ item.info.startTime.slice(0,10) }}～{{ item.info.endTime.slice(0,10) }}</span>
									</div>
									<span class="coupon-btn over">已使用</span>
								</div>
							</div>
							<div class="img-box" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh pageNum="page3" >
							<div class="big-box" v-if="page3.list.length > 0">
								<div class="coupon-box" v-for="item in page3.list">
									<div class="left"></div>
									<div class="right"></div>
									<div class="coupon-info">
										<span class="coupon-border" v-if="item.info.tags">{{ item.info.tags }}专用券</span>
										<span class="coupon-money">
											<label style="font-size: 3.73vw;">￥</label>{{item.info.price | moneyFilter}}
										</span>
										<span class="jiu-font24-555" style="color: #A972FF;">满{{item.info.conditionPrice | moneyFilter}}元可用</span>
										<span class="jiu-font24-555">有效期: {{ item.info.startTime.slice(0,10) }}～{{ item.info.endTime.slice(0,10) }}</span>
									</div>
									<span class="coupon-btn over">已失效</span>
								</div>
							</div>
							<div class="img-box" v-else>
								<image src="@/static/img/noProduct.png" mode="aspectFill"
									style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
							</div>
						</ma-refresh>
					</swiper-item>
				</swiper>
			
				<div v-else-if="couponType == 'shop'">
					<div class="big-box" v-if="page4.list.length > 0">
						<div class="coupon-box" v-for="item in page4.list">
							<div class="left"></div>
							<div class="right"></div>
							<div class="coupon-info">
								<span class="coupon-border" v-if="item.info.tags">{{ item.info.tags }}专用券</span>
								<span class="coupon-money">
									<label style="font-size: 3.73vw;">￥</label>{{item.info.price | moneyFilter}}
								</span>
								<span class="jiu-font24-555" style="color: #A972FF;">满{{item.info.conditionPrice | moneyFilter}}元可用</span>
								<span class="jiu-font24-555">有效期: {{ item.info.startTime.slice(0,10) }}～{{ item.info.endTime.slice(0,10) }}</span>
							</div>
							<span class="coupon-btn" :class="[item.userCoupon.useStatus != 'unused' ? 'over' : '']">{{  useText(item.userCoupon.useStatus) }}</span>
						</div>
					</div>
					
					<div class="img-box" v-else>
						<image src="@/static/img/noProduct.png" mode="aspectFill"
							style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
					</div>
				</div>
			</div>
		</ma-body>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default{
		data(){
			return{
				titleList: ['全部','待使用','已使用','已失效'],
				currindex: 0,
				page0: new Refresh(this,{
					apiName: 'getCouponMyList',
					apiData: {
						searchType: 'coupon',
						useStatus: 'all'
					}
				}),
				page1: new Refresh(this,{
					apiName: 'getCouponMyList',
					apiData: {
						useStatus: 'unused',
						searchType: 'coupon'
					}
				}),
				page2: new Refresh(this,{
					apiName: 'getCouponMyList',
					apiData: {
						useStatus: 'used',
						searchType: 'coupon'
					}
				}),
				page3: new Refresh(this,{
					apiName: 'getCouponMyList',
					apiData: {
						useStatus: 'over',
						searchType: 'coupon'
					}
				}),
				page4: new Refresh(this , {
					apiName: 'getCouponMyList',
					apiData: {
						useStatus: 'all',
						searchType: 'coupon',
						// creatorId: 0,
						spuId: 0
					}
				}),
				couponType: ''
			}
		},
		methods: {
			onSelect(e){
				this.currindex = e;
			},
			swiperChange(e){
				console.log(e)
				this.currindex = e.detail.current;
			}
		},
		computed:{
			useText() {
				item => {
					if(item == 'unused') return '未使用';
					else if(item == 'used') return '已使用';
					else if(item == 'over') return '已失效'
				}
			},
			
		},
		async onLoad(e) {
			this.couponType = e.couponType;
			console.log(e)
			if(e.couponType == 'my'){
				await this.page0.onRefresh();
				await this.page1.onRefresh();
				await this.page2.onRefresh();
				await this.page3.onRefresh();
			}else if(e.couponType == 'shop'){
				this.page4.apiData.spuId = e.id;
				this.page4.onRefresh();
			}
		}
	}
</script>

<style lang="scss">
	.img-box {
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content{
		height: 100%;
	}
	swiper{
		height: 100%;
	}
	.header-box {
		display: flex;
		justify-content: space-between;
		padding: 0vw 5.33vw;
		background-color: #1b1b1b;
	
		.title {
			font-size: 3.73vw;
			font-weight: 300;
			color: #555555;
			margin-right: 6.4vw;
			line-height: 11.73vw;
			display: inline-block;
		}
	
		.title:last-child {
			margin-right: 0;
		}
	
		.selectTitle {
			border-bottom: 2px solid #FFCE80;
			color: #FFCE80;
			font-weight: 500;
		}
	}
	
	.big-box{
		padding: 0 4.27vw;
		height: 100%;
		padding-top: 1.6;
		.coupon-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #1b1b1b;
			padding: 4.27vw 6.4vw 4vw 6.4vw;
			margin-top: 2.67vw;
			border-radius: 4.27vw;
			position: relative;
			.left{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				background-color: #000;
				position: absolute;
				top: 14.4vw;
				left: -2.13vw;
			}
			.right{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				background-color: #000;
				position: absolute;
				top: 14.4vw;
				right: -2.13vw;
			}
			.coupon-info{
				display: flex;
				flex-direction: column;
				padding-right: 2.13vw;
				border-right: 1px dashed #000;
				.coupon-border{
					width: fit-content;
					padding: 0 1.07vw;
					line-height: 4.8vw;
					border: 1px solid #A972FF;
					color: #A972FF;
					font-size: 2.67vw;
					font-weight: 300;
					border-radius: 1.07vw;
				}
			
				.coupon-money{
					font-size: 6.4vw;
					font-weight: 500;
					color: #fff;
					margin-top: 2.13vw;
				}
			}
			.coupon-btn{
				width: 21.33vw;
				line-height: 8.53vw;
				text-align: center;
				background-color: #A972FF;
				box-shadow: 0rem 1rem 2rem rgba(71,12,114,0.48);
				border-radius: 5.33vw;
				font-size: 3.2vw;
				font-weight: 500;
				color: #000;
			}
		}
	}
	
	.over{
		background-color: #555555;
		color: #000;
	}
</style>